<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="query">
      <el-form-item>
        <el-input
          v-model="query.userName"
          placeholder="昵称"
          :clearable="true"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="query.userTel"
          placeholder="手机"
          :clearable="true"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="query.userStatus"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in statusLsit"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadUsers"
          ><i class="el-icon-search"></i
        ></el-button>
      </el-form-item>
      <el-form-item>
        <el-row>
          <el-col :span="24">
            <el-button type="success" @click="exportExcel">导出数据</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>

    <el-table
      :data="userList"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="30">
      </el-table-column>
      <el-table-column align="center" prop="userName" label="昵称" width="100">
      </el-table-column>
      <el-table-column label="头像" prop="userImg" align="center" width="100px">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px; margin-bottom: -4px"
            :src= scope.row.userImg
          >
          </el-image>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="userTel"
        label="手机号码"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="accCarsBound"
        label="绑定车辆数"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="accOrderCount"
        label="订单数量"
        width="80"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="accUnpaidOrderCount"
        label="未缴费订单"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="userStatus"
        label="状态"
        min-width="80"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.userStatus == 0">正常</span>
          <span v-if="scope.row.userStatus == 1">禁用</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="userCreatedTime"
        label="注册时间"
        width="160"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="400">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="checkParticulars(scope.row.userId)"
            >查看详情</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="updateStatus(scope.row.userId, scope.row.userStatus)"
            >禁用</el-button
          >
          <el-button
            type="success"
            size="mini"
            @click="updateStatus(scope.row.userId, scope.row.userStatus)"
            >解禁</el-button
          >
          <el-button
            type="success"
            size="mini"
            @click="handleEdit(scope.row.userId)"
            >修改个人信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
    <!-- -----------------------修改dialog------------------------------------------------------ -->
    <el-dialog
      title="修改个人信息"
      :visible.sync="dialog.updateshow"
      width="30%"
    >
      <el-form :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号">
              <el-input
                v-model="updateForm.userTel"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input
                v-model="updateForm.userName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="updateForm.userPwd"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="userImg" hidden>
              <el-input v-model="updateForm.userImg" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户头像">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/users/upload"
                name="file"
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="updateUser">提 交</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      
      dialog: {
        updateshow: false,
      },
      updateForm: {},
      user: {},
      imageUrl: "",
      userList: [],
      statusLsit: [
        {
          id: 0,
          name: "正常",
        },
        {
          id: 1,
          name: "禁用",
        },
        {
          id: null,
          name: "请选择",
        },
      ],
      page: {
        pageSizes: [5, 10, 20, 50, 100], //下拉列表中的数组
        total: 0, //一共有多少条数据
      },
      query: {
        currentPage: 1, //代表当前页
        pageSize: 5, //代表每页显示多少条数据
        userName: "",
        userTel: "",
        userStatus: null,
      },
    };
  },
  methods: {
    updateUser() {
      this.$axios.put("/users/yyh", this.updateForm).then((res) => {
        if (res.data.code == 200) {
          this.dialog.updateshow = false; //关掉模态框
          this.imageUrl = "";
          this.loadUsers();
        }
      });
    },

    handleEdit(id) {
      //查询对应的数据
      this.$axios.get("/users/" + id).then((res) => {
        this.updateForm = res.data.data.user;
        this.imageUrl = this.updateForm.userImg;
      });
      //显示修改模态框
      this.dialog.updateshow = true;
    },

    handleSuccess(res, file) {
      if (res.code == 200) {
        this.imageUrl = res.message;
        this.updateForm.userImg = res.message; //将返回的文件储存路径赋值picture字段
      }
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    handleExcelSuccess(res, result) {
      this.$message.success("导入成功");
      if (result.response.success) {
        this.load();
      }
    },
    // 上传中
    onExcelProgress() {},

    selectChange() {},
    checkParticulars(uid) {
      this.$router.push({ path: "/system/particulars", query: { uid: uid } });
    },
    loadUsers() {
      this.$axios.post("users/queryLike", this.query).then((res) => {
        this.userList = res.data.data.userList;
        this.page.total = res.data.data.total;
      });
    },

    handleSizeChange(val) {
      //当每页数据改变时
      this.query.pageSize = val;
      this.loadUsers();
    },
    handleCurrentChange(val) {
      //当点击页码时
      this.query.currentPage = val;
      this.loadUsers();
    },
    exportExcel() {
      this.$axios
        .post("users/exportExcel", this.query, { responseType: "blob" })
        .then((res) => {
          let fileName = res.headers["content-disposition"].split("=")[1]; //得到后端生成的文件名
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let dom = document.createElement("a");
          dom.style.display = "none";
          dom.href = url;
          dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
          document.body.appendChild(dom);
          dom.click();
          // 释放内存
          dom.parentNode.removeChild(dom);
          window.URL.revokeObjectURL(dom.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    updateStatus(id, status) {
      this.$axios
        .post("users/upadateStatus", {
          userId: id,
          userStatus: status,
        })
        .then((res) => {
          if (res.data.code == 200) {
            if (status == 0) {
              this.$message.success("禁用成功");
            } else {
              this.$message.success("解禁成功");
            }
            this.loadUsers();
          }
        });
    },
  },
  mounted() {
    this.loadUsers();
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>